<template>
	<scroll class="listview" :dataA="live" ref="listview" :listen-scroll="listenScroll"
		@scroll="scroll"	:probe-type="probeType">
		<!-- 左侧歌手列表 -->
		<ul>
      <li v-for="(group,index) in live" :key="index" class="list-group" ref="listGroup">
        <h2 class="list-group-title">{{group.title}}</h2>
        <uL>
          <li @click="selectItem(item)" v-for="(item, index) in group.items"  :key="index" class="list-group-item">
            <img class="avatar" v-lazy="item.avatar">
            <span class="name">{{item.name}}</span>
          </li>
        </uL>
      </li>
    </ul>
		<!-- 右测字母列表 -->
		<div class="list-shortcut" 
			@touchstart.stop.prevent="onShortcutTouchStart" 
			@touchmove.stop.prevent="onShortcutTouchMove"
			@touchend.stop>
			<ul>
				 <li v-for="(item, index) in shortcutList" :data-index="index"  :key="index" class="item"
            :class="{'current':currentIndex===index}">{{item}}
        </li>
			</ul>
		</div>
		<!-- tip文字 -->
		<div class="list-fixed" ref="fixed" v-show="fixedTitle">
			<div class="fixed-title">{{fixedTitle}}</div>
		</div>
		<div v-show="!live.length" class="loading-container">
      <loading></loading>
    </div>
	</scroll>
</template>

<script>
import Scroll from 'base/scroll/scroll'
import loading from 'base/loading/loading'
import {getData} from 'common/js/dom' //自定义dom结构
const TITLE_HEIGHT = 30 //title 的高度
const ANCHOR_HEIGHT = 18//字母表的高度
export default {
  name: 'listview',
	created() {
		this.probeType = 3
		this.listenScroll = true
		this.touch = {}
		this.listHeight = []
	},
	data() {
		return {
			scrollY: -1, //监听时时滚动的位置
			currentIndex: 0,
			diff: -1,//热门字母表的title
		}
	},
	props: {
		live: {
			type: Array,
			default:function(){
				return []
			}
		} 
	},
	computed:{
		shortcutList(){//循环得到字母的首字母
			return this.live.map((group)=>{
				return group.title.substr(0,1)
			})
		},
		fixedTitle(){//字母列表的title头 边界问题
			if(this.scrollY>0){return ""}
			return this.live[this.currentIndex]?this.live[this.currentIndex].title:""
		}
	},
	methods:{
		selectItem(item) {
			this.$emit('select', item)
		},
		onShortcutTouchStart(e) { //手指接触	<li data-index="7" class="item">H</li>
			let anchorIndex = getData(e.target, 'index') //获取下标
			let firstTouch = e.touches[0] //获取第一个手指的位子
			this.touch.y1 = firstTouch.pageY
			this.touch.anchorIndex = anchorIndex//记录当前的点击的索引
			this._scrollTo(anchorIndex)
		},
		onShortcutTouchMove(e) { //手指移动
			let firstTouch = e.touches[0] 
			this.touch.y2 = firstTouch.pageY//相减可以得到滚动的高度 
			let delta = (this.touch.y2 - this.touch.y1) / ANCHOR_HEIGHT | 0
			let anchorIndex = parseInt(this.touch.anchorIndex) + delta//等到要滚动几个索引值
			this._scrollTo(anchorIndex)
		},
		refresh() {
			this.$refs.listview.refresh()
		},
		scroll(pos) {//从scroll派发出来的scroll的位置
			this.scrollY = pos.y
		},
		_calculateHeight() { //获取歌手列表的高度值
			this.listHeight = []
			const list = this.$refs.listGroup
			let height = 0
			this.listHeight.push(height)
			for (let i = 0; i < list.length; i++) {
				let item = list[i]
				height += item.clientHeight
				this.listHeight.push(height)	
			}
			// (24)[0, 760, 1030, 1370, 1780, 1910, 2110, 2450, 2720, 3060, 3190, 3950, 4430, 4700, 4900, 5100, 5370, 5570, 5980, 6460, 7010, 7560, 7900, 9010
		},
		_scrollTo(index) { //封装了要滚动的条数位置
			if (!index && index !== 0) { //首尾2端点击无效
				return
			}
			if (index < 0) { //超出边界
				index = 0 
			} else if (index > this.listHeight.length - 2) {
				index = this.listHeight.length - 2
			}
			//点击字母表是滑动条位子不变 需要手动设置 watch
			this.scrollY = -this.listHeight[index]//手动设置滚动条位置
			this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0)
		}
		
	},
	watch: {
		live() {
			setTimeout(() => { //延时计算高度 确保每个手机的数据都能兼容
				this._calculateHeight()
			}, 20)
		},
		scrollY(newY) { //比较数组的位置
			const listHeight = this.listHeight
			// 当滚动到顶部，newY>0
			if (newY > 0) {
				this.currentIndex = 0
				return
			}
			// 在中间部分滚动
			for (let i = 0; i < listHeight.length - 1; i++) {
				let height1 = listHeight[i]
				let height2 = listHeight[i + 1]
				if (-newY >= height1 && -newY < height2) {
					this.currentIndex = i
					this.diff = height2 + newY //热门字母表的title
					return
				}
			}
			// 当滚动到底部，且-newY大于最后一个元素的上限
			this.currentIndex = listHeight.length - 2
		},
		diff(newVal) {//热门字母表的title
			let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
			if (this.fixedTop === fixedTop) { //在中间局域滑动不需要变化
				return
			}
			this.fixedTop = fixedTop
			this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`
		}
	},
	components: {
		Scroll,
		loading
	}
}
</script>

<style lang="scss" scoped >
		.listview{
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background: $color-background;
			.list-group{
				padding-bottom: 30px;
				.list-group-title{
					height: 30px;
					line-height: 30px;
					padding-left: 20px;
					font-size: $font-size-small;
					color: $color-text-l;
					background: $color-highlight-background;
				}
				.list-group-item{
					display: flex;
					align-items: center;
					padding: 20px 0 0 30px;
					.avatar{
						width: 50px;
						height: 50px;
						border-radius: 50%;
					}
					.name{
						margin-left: 20px;
						color: $color-text-l;
						font-size: $font-size-medium;
					}
				}
			}
			.list-shortcut{
				position: absolute;
				z-index: 30;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 20px;
				padding: 20px 0;
				border-radius:10px;
				text-align: center;
				background: $color-background-d;
				font-family: Helvetica;
				.item{
					padding: 3px;
					line-height: 1;
					color: $color-text-l;
					font-size: $font-size-small;
					&.current{color: $color-theme;}
					}
				}
				.list-fixed{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					.fixed-title{
						height: 30px;
						line-height: 30px;
						padding-left: 20px;
						font-size: $font-size-small;
						color: $color-text-l;
						background: $color-highlight-background;
					}
				}
				.loading-container{@include jucen();}
				
			}

		
</style>